﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>03-XEventTest</title>
    <link href="../dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <button type="button" id="btnTest">Click me!</button>
    <script src="../dist/js/jquery.js"></script>
    <script src="../dist/js/popper.js"></script>
    <script src="../dist/js/bootstrap.js"></script>
    <script src="../dist/js/bootstrap-es6.js"></script>
    <script>
        var btn = document.getElementById('btnTest');
        var event = new XEvent(btn, {
            onclick: function () {
                alert(`You click button '${this.target.innerHTML}'.`);
            }
        });

        var fun1 = function () {
            alert('This is fun1.');
        };
        event.add('onclick', fun1);
        event.remove('click', fun1);
        event.add('mouseover', function () {
            this.target.style.color = 'white';
            this.target.style.backgroundColor = 'green';
        });
        event.add('mouseout', function () {
            this.target.style.color = 'white';
            this.target.style.backgroundColor = 'blue';
        });
    </script>
</body>
</html>